<template>
  <div class="bc-layout-container-footer">
    <div class="footer-center">
      <div class="footer-center-section1">
        <div class="footer-center-section1-left">
          <div>
            <yun-icon name="call" fontSize="12px" vertical="top"></yun-icon>
            <span>联系电话：010-6868088</span>
          </div>
          <div>
            <yun-icon name="message" fontSize="10px" vertical="top"></yun-icon>
            <span>官方邮箱：os_beyond_clouds@163.com</span>
          </div>
        </div>
        <div class="footer-center-section1-center">
          <a href="https://yundingshuyuan.com" target="_blank">云顶书院官网</a>
          <a href="">代码托管平台官网</a>
        </div>
        <div class="footer-center-section1-right">
          <div>
            <nuxt-link to="/web/about">关于我们</nuxt-link>
            <a  href="https://yundingshuyuan.com" target="_blank">加入我们</a>
          </div>
          <div>
            <nuxt-link to="/web/contact">联系我们</nuxt-link>
            <a href="">商务合作</a>
          </div>
          <div>
            <nuxt-link to="/web/copyright">版权声明</nuxt-link>
            <nuxt-link to="/web/agreement">用户协议</nuxt-link>
          </div>
          <div>
            <nuxt-link to="/web/report">投诉举报</nuxt-link>
            <nuxt-link to="/web/feedback">意见反馈</nuxt-link>
          </div>
        </div>
      </div>
      <div class="footer-center-section2">
        <p class="footer-center-section2-l">
          Copyright © 2019 云里云外开源社区 All Rights Reserved · <a target="_blank" href="https://beian.miit.gov.cn">晋ICP备18010660号-2</a>
        </p>
        <p class="footer-center-section2-r">
          营业执照 · 网络文化经营许可证
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "pageFooter"
}
</script>

<style lang="scss" scoped>
  .bc-layout-container-footer {
    width: 100%;
    background-color: #fff;
    z-index: 7000;
    .footer-center {
      width: $pageWidth;
      margin: 0 auto;
      .footer-center-section1 {
        height: 188*$length;
        @extend %flex-row-spb;
        .footer-center-section1-right {
          @extend %flex-row-spb;
          width: 508*$length;
          div {
            a {
              display: block;
              @include fontStyle(13, 17, 500, #8F9CA0, center);
              @extend %animate-transition;
              &:hover{
                color:#00AAE6;
              }
              &:first-child {
                margin-bottom: 26*$length;
              }
            }
          }
        }
        .footer-center-section1-center {
          a {
            display: block;
            @include fontStyle(13, 17, 500, #8F9CA0, start);
            @extend %animate-transition;
            &:hover{
              color:#00AAE6;
            }
            &:first-child {
              margin-bottom: 26*$length;
            }
          }
        }
        .footer-center-section1-left {
          @extend %flex-column-spb;
          align-items: start;
          div{
            vertical-align: middle;
            @include fontStyle(13, 17, 500, #8F9CA0, start);
            @extend %animate-transition;
            @extend %cursorPointer;
            &:hover{
              color:#00AAE6;
            }
            &:first-child {
              padding-bottom: 26*$length;
            }
            > span{
              vertical-align: middle;
              margin-left: 10*$length;
            }
          }
        }
      }
      .footer-center-section2 {
        height: 54*$length;
        border-top: 1px solid #EFEFEF;
        font-size: 12*$font-size;
        color: #8F9CA0;
        @extend %flex-row-spb
      }
    }
  }
</style>
